// @import '~@inbiz/components/style/index.less';
@prefix-cls: ~'inbiz-AppCenter';

.@{prefix-cls} {
  .commonHover {
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);

    .ant-typography {
      color: #1989fa;
    }
  }

  .commonstyle {
    display: inline-block;
    margin-bottom: 20px;
    margin-left: 20px;
    color: var(--inbiz-color-heading);
    border-radius: 4px;
    cursor: pointer;

    &:hover {
      .commonHover();
    }

    .contentContainer {
      display: flex;
      width: 100%;
      height: 100%;
    }
  }

  .common-rest {
    display: inline-block;
    height: 0;
    // margin-left: 20px;
  }

  h3 {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  &-blueSquare {
    display: inline-block;
    width: 4px;
    height: 20px;
    margin-right: 12px;
    background-color: #1989fa;
  }

  &-infoContainer {
    padding-bottom: 6px;
    padding-left: 6px;
    overflow: auto;
    text-align: left;

    .appContainer {
      margin-left: -20px;

      .card {
        width: 240px;
        height: 80px;
        // padding: 15px;
        background-color: #fff;
        border: 1px solid #ddd;

        .commonstyle();

        .contentContainer {
          align-items: center;
          text-align: left;

          .card-img {
            width: 90px;
            height: 45px;
            margin: 0 7px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            border-radius: 4px;
          }
        }
      }

      .simple {
        width: 150px;
        height: 150px;
        background-color: transparent;
        .commonstyle();

        .contentContainer {
          flex-direction: column;
          justify-content: center;
          text-align: center;

          img {
            width: auto;
            max-width: calc(100% - 20px);
            height: auto;
            max-height: 100%;
            margin-bottom: 15px;
          }
        }
      }

      .card-rest {
        width: 240px;
        .common-rest();
      }

      .simple-rest {
        width: 150px;
        .common-rest();
      }
    }
  }
}
